<template>
  <div class="download-comp">
    <a
      id="index-aside-download-qrbox"
      class="download"
      data-toggle="popover"
      data-placement="top"
      data-html="true"
      data-trigger="hover"
      data-content='<img src="//cdn2.jianshu.io/assets/web/download-index-side-qrcode-cb13fc9106a478795f8d10f9f632fccf.png" alt="Download index side qrcode" />'
      href="/download"
      data-original-title=""
      title=""
    >
      <img
        class="qrcode"
        src="//cdn2.jianshu.io/assets/web/download-index-side-qrcode-cb13fc9106a478795f8d10f9f632fccf.png"
        alt="Download index side qrcode"
      />
      <div class="info">
        <div class="title">下载简书手机App<i class="iconfont ic-link"></i></div>
        <div class="description">随时随地发现和创作内容</div>
      </div>
    </a>
    <a
      href="https://www.jianshu.com/p/304aa16a9dce"
      target="_blank"
      class="youdao-img-ad ad-1 gupao"
      ><span class="ad-badge">广告</span></a
    >
  </div>
</template>

<script>
  import  'bootstrap/dist/css/bootstrap.min.css';
export default {
  name: "DownloadComp"
};
</script>

<style scoped>
.download-comp {
  margin: 10px auto;
  width: 100%;
  padding: 10px 0;
  border: 1px solid #f0f0f0;
  border-radius: 6px;
  background-color: #fff;
}

.download {
  margin-bottom: 30px;
  padding: 10px 22px;
  width: 100%;
}

.download .qrcode {
  width: 60px;
  height: 60px;
  opacity: 0.85;
}

.download .info {
  display: inline-block;
  vertical-align: middle;
  margin-left: 7px;
}

.download .info .title {
  font-size: 15px;
  color: #333;
}

.download .info .description {
  margin-top: 4px;
  font-size: 13px;
  color: #999;
}

.popover,
.popover .popover-content {
  background-color: #fff !important;
}

.popover-content {
  padding: 10px;
  border: none;
}

.popover-content img {
  width: 160px;
  height: 160px;
}
.youdao-img-ad {
  position: relative;
  border-radius: 4px;
  display: block;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  height: 160px;
  width: 100%;
  margin-bottom: 20px;
  overflow: hidden;
  background-color: RGB(241, 243, 244);
}
body.reader-night-mode .youdao-img-ad {
  background-color: #4f4f4f;
}
.youdao-img-ad.ad-1 {
  margin-top: 30px;
}
.youdao-img-ad.ad-2 {
  margin-top: 70px;
}
.youdao-img-ad .ad-badge {
  position: absolute;
  bottom: 0;
  right: 0;
  color: #fff;
  background-color: #000;
  padding: 0 5px;
  font-size: 12px;
  line-height: 20px;
  opacity: 0.7;
}
.gupao {
  background-image: url(//cdn2.jianshu.io/assets/ads/java_1-755777d0f56b28c5455e5e59669a3db8.png);
}

</style>
